<style lang="less">
  @import "../../../styles/table-common.less";
</style>
<template>
  <div class="search">
    <!-- <div>行业管理</div> -->
    <Card>
      <Row class="operation">
        <Button @click="add" type="primary" icon="md-add">添加行业</Button>
        <Button @click="delAll" icon="md-trash">批量删除</Button>
        <Button @click="getUserList" icon="md-refresh">刷新</Button>
      </Row>
      <Row v-show="openTip">
        <Alert show-icon>
          已选择
          <span class="select-count">{{selectCount}}</span> 项
          <a class="select-clear" @click="clearSelectAll">清空</a>
        </Alert>
      </Row>
      <Row>
        <Table
                :loading="loading"
                border
                :columns="columns"
                :data="data"
                sortable="custom"
                @on-sort-change="changeSort"
                @on-selection-change="showSelect"
                ref="table"
        ></Table>
      </Row>
      <Row type="flex" justify="end" class="page">
        <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50]"
                size="small"
                show-total
                show-elevator
                show-sizer
        ></Page>
      </Row>
    </Card>

    <addEdit :data="form" :type="showType" v-model="showUser" @on-submit="getUserList" />
  </div>
</template>

<script>
  import {
    getBusinessList, removeBusiness, createOrUpdateBusiness
  } from "@/api/index";
  import addEdit from "./businessEdit.vue";
  export default {
    name: "business-manage",
    components: {
      addEdit
    },
    data() {
      return {
        height: 510,
        showUser: false,
        showType: "0",
        loading: true,
        openTip: true,
        selectCount: 0,
        selectList: [],
        searchKey: "",
        searchForm: {
          pageNumber: 1,
          pageSize: 10,
          sort: "createTime",
          order: "desc"
        },
        form: {},
        columns: [
          {
            type: "selection",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            type: "index",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            title: "行业名称",
            key: "businessName",
            minWidth: 125
          },
          {
            title: "备注",
            key: "description",
            width: 200,
            align: "center",
          },
          {
            title: "状态",
            key: "status",
            align: "center",
            width: 110,
            render: (h, params) => {
              if (params.row.status === 0) {
                return h("div", [
                  h("Badge", {
                    props: {
                      status: "success",
                      text: "正常启用"
                    }
                  })
                ]);
              } else if (params.row.status === -1) {
                return h("div", [
                  h("Badge", {
                    props: {
                      status: "error",
                      text: "禁用"
                    }
                  })
                ]);
              }
            },
            filters: [
              {
                label: "正常启用",
                value: 0
              },
              {
                label: "禁用",
                value: -1
              }
            ],
            filterMultiple: false,
            filterRemote: e => {
              let v = "";
              if (e.length > 0) {
                v = e[0];
              }
              this.searchForm.status = v;
              this.searchForm.pageNumber = 1;
              this.getUserList();
            }
          },
          {
            title: "创建时间",
            key: "createTime",
            minWidth: 180,
            sortable: false
          },
          {
            title: "操作",
            key: "action",
            width: 200,
            align: "center",
            fixed: "right",
            render: (h, params) => {
              let enableOrDisable = "";
              if (params.row.status === 0) {
                enableOrDisable = h(
                        "Button",
                        {
                          props: {
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.disable(params.row);
                            }
                          }
                        },
                        "禁用"
                );
              } else {
                enableOrDisable = h(
                        "Button",
                        {
                          props: {
                            type: "success",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.enable(params.row);
                            }
                          }
                        },
                        "启用"
                );
              }
              return h("div", [
                h(
                        "Button",
                        {
                          props: {
                            type: "primary",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.edit(params.row);
                            }
                          }
                        },
                        "编辑"
                ),
                enableOrDisable,
                h(
                        "Button",
                        {
                          props: {
                            type: "error",
                            size: "small"
                          },
                          on: {
                            click: () => {
                              this.remove(params.row);
                            }
                          }
                        },
                        "删除"
                )
              ]);
            }
          }
        ],
        data: [],
        total: 0,
      };
    },
    methods: {
      init() {
        this.getUserList();
      },
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getUserList();
        this.clearSelectAll();
      },
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.getUserList();
      },
      getUserList() {
        // 多条件搜索用户列表
        this.loading = true;
        getBusinessList(this.searchForm).then(res => {
          this.loading = false;
          if (res.code === 200) {
            this.data = res.result.content;
            this.total = res.result.size;
          }else {
            this.data = [];
            this.total = 0;
          }
        });
      },
      changeSort(e) {
        this.searchForm.sort = e.key;
        this.searchForm.order = e.order;
        if (e.order === "normal") {
          this.searchForm.order = "";
        }
        this.getUserList();
      },
      showDetail(v) {
        // 转换null为""
        for (let attr in v) {
          if (v[attr] == null) {
            v[attr] = "";
          }
        }
        let str = JSON.stringify(v);
        let data = JSON.parse(str);
        this.form = data;
        this.showType = "0";
        this.showUser = true;
      },
      add() {
        this.showType = "2";
        this.showUser = true;
      },
      edit(v) {
        // 转换null为""
        for (let attr in v) {
          if (v[attr] == null) {
            v[attr] = "";
          }
        }
        let str = JSON.stringify(v);
        let data = JSON.parse(str);
        this.form = data;
        this.showType = "1";
        this.showUser = true;
      },
      disable(v) {
        this.$Modal.confirm({
          title: "确认禁用",
          content: "您确认要禁用行业 " + v.jobName + " ?",
          loading: true,
          onOk: () => {
            createOrUpdateBusiness({id: v.id, status: -1, createBy: v.createBy}).then(res => {
              this.$Modal.remove();
              if (res.success) {
                this.$Message.success("操作成功");
                this.getUserList();
              }
            });
          }
        });
      },
      enable(v) {
        this.$Modal.confirm({
          title: "确认启用",
          content: "您确认要启用行业 " + v.jobName + " ?",
          loading: true,
          onOk: () => {
            createOrUpdateBusiness({id: v.id, status: 0, createBy: v.createBy}).then(res => {
              this.$Modal.remove();
              if (res.success) {
                this.$Message.success("操作成功");
                this.getUserList();
              }
            });
          }
        });
      },
      remove(v) {
        this.$Modal.confirm({
          title: "确认删除",
          content: "您确认要删除公告内容吗?",
          loading: true,
          onOk: () => {
            removeBusiness({ ids: v.id }).then(res => {
              this.$Modal.remove();
              if (res.success) {
                this.$Message.success("删除成功");
                this.getUserList();
              }
            });
          }
        });
      },
      showSelect(e) {
        // this.exportData = e;
        this.selectList = e;
        this.selectCount = e.length;
      },
      clearSelectAll() {
        this.$refs.table.selectAll(false);
      },
      delAll() {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要删除的数据");
          return;
        }
        this.$Modal.confirm({
          title: "确认删除",
          content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
          loading: true,
          onOk: () => {
            let ids = "";
            this.selectList.forEach(function(e) {
              ids += e.id + ",";
            });
            ids = ids.substring(0, ids.length - 1);
            removeBusiness({ ids: ids }).then(res => {
              this.$Modal.remove();
              if (res.success) {
                this.$Message.success("删除成功");
                this.clearSelectAll();
                this.getUserList();
              }
            });
          }
        });
      }
    },
    mounted() {
      // 计算高度
      this.height = Number(document.documentElement.clientHeight - 230);
      this.init();
    }
  };
</script>